<template>
  <div class="shouye">
    <div>

      <header>
        <div class="left">
          <div class="top">
            <img src="https://cdn7.axureshop.com/demo/2117333/images/%E9%A6%96%E9%A1%B5/u584.png" alt="">
          </div>
          <div class="guan">
            <!-- {{ userInfoStore.useinfo.adminname || test}} -->
            <p class="one">zls,祝你开心每一天！</p>
            <p class="sec">
              <span>希望小学</span>
              |
              <span>超级管理员</span>
            </p>
          </div>
        </div>
        <div class="right"></div>
      </header>
      <main>
        <div class="unit">
          <div class="up">本单位信息</div>
          <div class="bottom">
            <img src="https://cdn7.axureshop.com/demo/2117333/images/%E9%A6%96%E9%A1%B5/u584.png" alt="">
            <div class="school">
              <p>希望小学</p>
              <p>所属区域：高新6路112号</p>
            </div>
          </div>
        </div>
        <div class="today">
          <div class="up">今日简报</div>
          <div class="bottom">
            <div class="num">
              <p>
                <span class="atte">{{ attendance.length }}</span>
                出勤人数</p>
            </div>
            <div class="num">
              <p><span class="ask">{{fill.length}}</span>事假人数</p>
            </div>
            <div class="num">
              <p><span class="fall">{{ drug.length }}</span>带药人数</p>
            </div>

          </div>
        </div>
        <div class="fast">
          <div class="up">快捷应用</div>
          <div class="bottom">
            <div class="logo">
              <img src="../../../assets/发布通知.jpg" alt="" width="60px" >
              <p>发布通知</p>
            </div>
            <div class="logo">
                <img src="../../../assets/发起投票.jpg" alt="" width="60px" >
                <p>发起投票</p>
              </div>
              <div class="logo">
                <img src="../../../assets/学生请假.jpg" alt="" width="60px" >
                <p>学生请假</p>
              </div>
              <div class="logo">
                <img src="../../../assets/日常评价.jpg" alt="" width="60px" >
                <p>日常评价</p>
              </div>
              <div class="logo">
                <img src="../../../assets/学生相册.jpg" alt="" width="60px" >
                <p>学生相册</p>
              </div>
              <div class="logo">
                <img src="../../../assets/带药提醒.jpg" alt="" width="60px" >
                <p>带药提醒</p>
              </div>
          </div>
        </div>
      </main>
      <footer>
        <div class="echatrs">
          <div class="up">发布消息统计
            <span>查看详情</span>
          </div>
          <div id="main" style="width: 720px;height: 300px;"></div>
        </div>

        <div class="user">
          <div class="up">用户活跃排名
            <span>查看详情</span>
          </div>
          <div class="bottom">
            <!-- tableData -->
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="sort" align="center" label="排名" />
              <el-table-column prop="teacher" align="center" label="姓名" />
              <el-table-column prop="count" align="center" label="累计发布消息数量" width="140" />
            </el-table>
          </div>
        </div>
        <div class="stats">
          <div class="up">用户统计</div>
          <div class="bottom">
            <div class="studes">
              <p>学生数量(人):<span>{{ studentsNum.length }}</span></p>
            </div>
            <div class="parents">
              <p>家长数量(人):<span >{{ studentsNum.length }}</span></p>
            </div>
            <div class="teacher">
              <p>老师数量(人):<span>{{ teacherNum.length }}</span></p>
            </div>
          </div>
        </div>

      </footer>

    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import { ref } from 'vue'


import server from '@/api';

var tableData = ref([])
const studentsNum = ref({})
const teacherNum = ref({})
const attendance = ref({})
const fill = ref({})
const drug = ref({})
// import { useUseinfoStore } from '@/stores/useinfo'
// var userInfoStore = useUseinfoStore()
// 基于准备好的dom，初始化echarts实例
onMounted(async () => {
  // 消息发布统计
  var res = await server.shouye.index_releaseMessageNum()
  var datalist = (res.data.data)
  // console.log(datalist);

  var myChart = echarts.init(document.getElementById('main'));
  myChart.setOption({
    title: {},
    tooltip: {},
    xAxis: {
      data: Object.keys(datalist)
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: Object.values(datalist),
        barWidth: '30',
        color: '#239ffe'
      }
    ]
  });

  // 用户活跃排行
  var res = await server.shouye.index_activeUserRanking()
  tableData.value = res.data.data
  
  //出勤
  var res = await server.shouye.attendance_attendanceStatistics()
  attendance.value = res.data.data

  //请假
  var res = await server.shouye.leaveApplication_getLeaveApplicationByPage()
  fill.value = res.data.data.data

  // 带药
  var res = await server.shouye.remind_getRemindByPage()
  console.log(res.data.data.date);
  drug.value = res.data.data.date
  
  // 学生人数
  var res = await server.shouye.student_getStudentByPage()
  studentsNum.value = res.data.data.date

  // 老师总数
  var res = await server.shouye.teacher_getTeacherByPage()
  // console.log(res.data.data.data);
  teacherNum.value= res.data.data.data
  // studentsNum.value = res.data.data.date
})


</script>

<style scoped lang="scss">
header {
  width: 100%;
  height: 150px;
  border: 1px solid #e3e3e3;
  background-color: #fff;
  margin-bottom: 20px;
}

header .left {
  display: flex;
  height: 100%;

  .top {
    height: 100%;
    line-height: 200px;
    padding: 0 15px;
  }
}

header .left .guan {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-evenly;

  .one {
    font-size: 24px;

    .sec {
      font-size: 16px;
      color: #333;
    }
  }
}

main {
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: space-evenly;

  .unit,
  .today {
    width: 350px;
    height: 130px;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    margin-right: 20px;
  }
}

main .today .bottom {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .num{
    height: 100%;
    // line-height: 80px;
    text-align: center;
    margin-top: 20px;
    span{
      display: block;
      font-weight: 700;
      font-size: 16px;
    }
    p{
      font-size: 14px;
    }
    .atte{
      color: green;
    }
    .ask{
      color: orange;
    }
    .fall{
      color: red;
    }
  }
}

main .fast {
  flex: 1;
  height: 130px;
  background-color: #fff;
  border: 1px solid #e3e3e3;
  .bottom{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-evenly;
    font-size: 12px;
  }
}

main .up {
  font-size: 18px;
  font-weight: bold;
  line-height: 50px;
  border-bottom: 1px solid #e3e3e3;
  padding-left: 10px;
}

main .unit .bottom {
  /* height: 100%; */
  display: flex;
  align-items: center;
  padding: 5px;

  .school {
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
}

footer {
  display: flex;

}

footer .echatrs {
  background-color: #fff;
  border: 1px solid #e3e3e3;
}

footer .echatrs .up>span,
.user .up>span {
  font-size: 16px;
  font-weight: normal;
  float: right;
  padding-right: 15px;
}

footer .user,
.stats {
  width: 400px;
  background-color: #fff;
  border: 1px solid #e3e3e3;
  margin-left: 20px;
}

footer .user .bottom {
  text-align: center;
}

footer .stats .bottom {
  box-sizing: border-box;
  padding: 0 10px;
  line-height: 80px;
}

footer .stats span {
  font-weight: bold;
  margin-left: 10px
}

footer .stats .studes {
  width: 100%;
  margin-top: 15px;
  height: 80px;
  background-color: rgba(135, 207, 235, 0.3);
  border-radius: 10px;

  p {
    color: #239ffe;
    padding-left: 15px;

    span {
      color: #239ffe;
    }

    ;
  }
}

footer .stats .parents {
  width: 100%;
  margin-top: 15px;
  height: 80px;
  background-color: rgba(253, 224, 127, 0.3);
  border-radius: 10px;

  p {
    color: rgb(255, 106, 0);
    padding-left: 15px;

    span {
      color: rgb(255, 106, 0);
    }

    ;
  }
}

footer .stats .teacher {
  width: 100%;
  margin-top: 15px;
  height: 80px;
  background-color: rgba(179, 255, 134, 0.311);
  border-radius: 10px;

  p {
    color: green;
    padding-left: 15px;

    span {
      color: green;
    }
  }
}</style>